<template>
  <div class="outer">
    <div class="inner">
      <ul class="list">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "scss-index"
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.leftfix {
  float: left;
}

.rightfix {
  float: right;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.outer {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
  background-color: skyblue;

  .inner {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /*position布局实现子元素在父元素内部的垂直居中： top+left+transform*/
    background-color: orange;
    display: flex;

    .list {
      margin: auto; /*父元素flex,子元素margin:auto 实现子元素在父元素的水平和垂直居中*/
      /*或者：
      justify-content: center;  水平居中
      align-items: center; 垂直居中
      */
      width: 100px;
      height: 100px;
      background-color: green;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      font-size: 20px;

      .item {
        height: 20px;
        line-height: 20px;
      }

      .item:nth-child(2n+1) {
        background-color: #538f15;
      }
    }
  }
}

</style>
